<template>
    <div class="resume">
        <div class="content">
            <el-row type="flex" class="row-bg" justify="center">
                <el-col :xs="20" :sm="18" :md="18" :lg="18" :xl="18">
                    <div class="right">
                        <div class="top">
                            <h2>
                                <span>最佳吉名</span>
                                <em
                                    @click="dialogFormVisible = true"
                                    style="cursor:pointer;"
                                    >举报</em
                                >
                            </h2>
                            <h3>
                                针对本命局配合汉子五行，音、义、形，综合确定如下起名方案：
                            </h3>
                            <ul>
                                <li v-for="(item, index) in list" :key="index">
                                    <h4 class="fzm">
                                        {{ index + 1 }}. {{ item.name }}
                                        <el-button size="mini">{{
                                            item.attribute
                                        }}</el-button>
                                    </h4>
                                    <div>
                                        <p
                                            v-for="ele in item.info"
                                            :key="ele.text"
                                        >
                                            <span>{{ ele.text }}</span>
                                            {{ ele.info }}
                                        </p>
                                    </div>
                                    <h5>
                                        文化渊源
                                    </h5>
                                    <p>
                                        {{ item.origin }}
                                    </p>
                                </li>
                            </ul>
                        </div>
                    </div>
                </el-col>
                <el-col :xs="20" :sm="6" :md="6" :lg="6" :xl="6">
                    <left :detail="detail"></left>
                </el-col>
            </el-row>
        </div>
        <el-dialog
            title="举报"
            @close="close"
            :visible.sync="dialogFormVisible"
        >
            <el-form :model="form">
                <el-form-item label="举报原因">
                    <el-select
                        v-model="form.region"
						
                        placeholder="请选择举报原因"
                    >
                        <el-option label="同行抄袭" :value="0"></el-option>
                        <el-option label="电脑起名" :value="1"></el-option>
                        <el-option label="解析不准" :value="2"></el-option>
                        <el-option label="其他" :value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-input
                        type="textarea"
                        :rows="4"
                        placeholder="请输入举报原因"
                        v-model="form.textarea"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-upload
                        class="upload-demo"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        ref="upt"
                        multiple
                    >
                        <el-button size="small" type="primary"
                            >上传附件</el-button
                        >
                        <div slot="tip" class="el-upload__tip">
                            为了能更快的处理您的举报信息,建议上传截图及其他相关文件等证据
                        </div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false"
                    >举 报</el-button
                >
            </div>
        </el-dialog>
    </div>
</template>

<script>
import left from "@/components/resumeLeft.vue"
export default {
    components: {
        left
    },
    data() {
        return {
            taskGuid: '', // 任务的id
            merchantGuid: '', // 商户的id
            form: {
                region: 2,
                textarea: ''
            },
            isTrue: false,
            dialogFormVisible: false,
            list: [
                {
                    name: "刘若朗",
                    attribute: "木火",
                    info: [
                        {
                            text: "从容自若1",
                            info: "沉着镇静，神态自若。"
                        },
                        {
                            text: "从容自若2",
                            info: "沉着镇静，神态自若。"
                        }
                    ],
                    origin: "若教阴朗长相似，整表梁王造化功。 --梁王坐上赋无云雨"
                },
                {
                    name: "刘若朗",
                    attribute: "木火",
                    info: [
                        {
                            text: "从容自若",
                            info: "沉着镇静，神态自若。"
                        },
                        {
                            text: "从容自若3",
                            info: "沉着镇静，神态自若。"
                        }
                    ],
                    origin: "若教阴朗长相似，整表梁王造化功。 --梁王坐上赋无云雨"
                },
                {
                    name: "刘若朗",
                    attribute: "木火",
                    info: [
                        {
                            text: "从容自若4",
                            info: "沉着镇静，神态自若。"
                        },
                        {
                            text: "从容自若5",
                            info: "沉着镇静，神态自若。"
                        }
                    ],
                    origin: "若教阴朗长相似，整表梁王造化功。 --梁王坐上赋无云雨"
                },
            ]
        }
    },
    created() {
        let taskGuid = this.$route.query.taskGuid;
        let merchantGuid = this.$route.query.merchantGuid;
        if (taskGuid) {
            this.merchantGuid = merchantGuid;
            this.taskGuid = taskGuid;
            this.init();
        }
    },
    methods: {
        init() {
            // this.$ajax.get("/merchant/replyTask", {
            //     params: {
            //         taskGuid: this.taskGuid
            //     }
            // }).then(res => {
            //     res = res.data.data;
            //     this.detail = res;
            // })
            this.$ajax.post("/merchant/getReplyTaskDetail", {
                merchantGuid: this.merchantGuid,
                taskGuid: this.taskGuid
            }).then(res => {
                res = res.data.data;
                this.detail = res;
            })
        },

        close() {
            this.form = {
                region: 2,
                textarea: ''
            };
            this.$refs.upt.clearFiles();
        }
    }
}
</script>

<style lang="scss" scoped>
    .el-row {
        flex-wrap: wrap;
        width: 100%;
    }
    .resume {
        background: #f7f7f7;
        padding: 58px 0;

        .content {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            .right {
                flex: 1;
                margin: 0 16px;
                background: #fff;
                padding: 38px 54px;
                border-radius: 12px;
                font-family: "黑体";
                .top {
                    h2 {
                        display: flex;
                        align-items: center;
                        font-size: 20px;
                        line-height: 36px;
                        color: #5c5c5c;
                        justify-content: space-between;
                        em {
                            font-style: normal;
                            text-decoration: underline;
                            color: #959494;
                            font-size: 16px;
                        }
                    }
                    h3 {
                        font-size: 18px;
                        line-height: 34px;
                        color: #959494;
                    }
                    ul {
                        padding: 20px 0;
                        li {
                            padding: 20px 0;
                            h4 {
                                font-size: 32px;
                                line-height: 62px;
                                color: #565656;
                                display: flex;
                                align-items: center;
                                .el-button {
                                    border-color: #4d67dc;
                                    color: #4d67dc;
                                    margin-left: 14px;
                                }
                            }
                            > div {
                                p {
                                    font-size: 18px;
                                    line-height: 34px;
                                    color: #565656;
                                }
                            }
                            h5 {
                                font-weight: bold;
                                font-size: 18px;
                                color: #565656;
                                padding: 14px 0;
                            }
                            > p {
                                color: #959494;
                                font-size: 18px;
                            }
                        }
                    }
                }
            }
        }
    }
    @media screen and (max-width: 750px) {
        .resume .content .right {
            margin: 10px 0;
            .top ul li {
                h4 {
                    font-size: 24px;
                }
                h3 {
                    font-size: 16px;
                }
            }
        }
    }
</style>